/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/require-default-props */
"use strict";

import React from "react";
import { Animated, Platform, StyleSheet, View, ImageBackground } from "react-native";
import tabBg from "assets/images/tabbg.png";

import ViewPropTypes from "./config/ViewPropTypes";
import Layout from "./Layout";

export default class TabBar extends React.Component {
  static propTypes = {
    ...Animated.View.propTypes,
    shadowStyle: ViewPropTypes.style,
  };

  render() {
    return (
      <ImageBackground source={tabBg} resizeMode="stretch" style={{ position: "absolute", bottom: -1, width: "100%", height: 80 }}>
        <View {...this.props} style={[styles.container, this.props.style]}>
          {this.props.children}
          <View style={[styles.shadow, this.props.shadowStyle]} />
        </View>
      </ImageBackground>
    );
  }
}

let styles = StyleSheet.create({
  container: {
    backgroundColor: "#f8f8f8",
    flexDirection: "row",
    justifyContent: "space-around",
    // height: 48,
    borderWidth: 0,
    position: "absolute",
    bottom: 0,
    left: 0,
    borderTopColor: "rgba(0, 0, 0, 0.25)",
    borderTopWidth: Layout.pixel,
    zIndex: 999,
    right: 0,
  },
  // shadow: {
  //   backgroundColor: "rgba(0, 0, 0, 0.25)",
  //   height: Layout.pixel,
  //   position: "absolute",
  //   zIndex: 100,
  //   left: 0,
  //   right: 0,
  //   top: Platform.OS === "android" ? 0 : -Layout.pixel,
  // },
});
